<template>
    <div class="content-box">
        <page-view>
            <page-header title="新增地址" :showBack="true"></page-header>

            <div >
                <address-edit
                    :area-list="areaList"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']"
                    @save="onSave"
                    :is-saving="isloading"
                    >
                    <field v-model="tag" label="标签" placeholder="设定标签"  required > </field>
                    </address-edit>
            </div>
        </page-view>

    </div>
</template>

<script>
import { AddressEdit,Field,Toast } from 'vant';
import { reactive,toRefs,} from 'vue';
import api from '../utils/api';
import { useRouter,useRoute } from 'vue-router';
export default {
    name:"AddAddress",
    components:{AddressEdit,Field},
    setup (props,context) {
   const router=useRouter()
   const route=useRoute()

   let info=reactive({
       areaList:{},
       isloading:false,
       tag:''
   })

    const getAreaList=async()=>{
    let result=await api.area.getAreaList()
    info.areaList=result
    } 

    getAreaList()

    const onSave = async(content) => {
        if(info.isloading){
            return
        }
        info.isloading=true;
        let addressInfo={
            address:[content.province,content.city,content.county,content.addressDetail].join(" "),
            phone:content.tel,
            person_name:content.name,
            tag:info.tag
        }
        await api.addressInfo.addAddress(addressInfo)
        info.isloading=false
        Toast('提交成功')
        router.replace({name:'ShopCar',query:{tabIndex:route.query.tabIndex}})
        };

            return {
            onSave,
        ...toRefs(info)
            };
        }
    }
</script>

<style lang="scss" scoped>
.content-box{
    height: 100%;
}
</style>